<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/addr-page.css">
    <link rel="stylesheet" href="../../css/vant.css">
</head>
<style scoped>
    /* .dizhitianjia .van-field__label {
        color: #333333;
        font-size: 16px;
        font-weight: 400;
    }

    .dizhitianjia .van-field__control {
        color: #333333;
        font-size: 16px;
        font-weight: 600;
    } */
    .add-address-btn-container {
        width: 100%;
        height: 70px;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        z-index: 100;
    }

    .add-address-btn {
        height: 50px;
        background: #3F8CEC;
        border-radius: 25px;
        line-height: 50px;
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        margin: 0 16px;
    }

    .add-address-btn-edit {
        min-width: 150px;
        margin: 0 16px;
        height: 50px;
        background: #3F8CEC;
        border-radius: 25px;
        line-height: 50px;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        background: #ffffff;
        border: 1px solid #3F8CEC;
        color: #3F8CEC;
    }
</style>

<body>
    <div class="app" v-cloak>
        <div class="dizhitianjia">
            <div class="main">
                <van-form :validate-first="true" :show-error-message="false" @submit="submitAddr">
                    <template>
                        <vant-row>
                            <vant-col>
                                <van-field v-model="addrForm.name" label="姓名" placeholder="请输入姓名"
                                    :rules="[{ required: true, message: '请输入姓名' }]" />
                            </vant-col>
                        </vant-row>
                        <vant-row>
                            <vant-col>
                                <van-field v-model="addrForm.phone" type="number" label="手机号码" placeholder="请输入手机号码"
                                    :rules="[{ required: true, message: '请输入手机号码' }]" />
                            </vant-col>
                        </vant-row>
                        <vant-row>
                            <vant-col>
                                <van-field v-model="addressStr" label="所在地区" readonly format-trigger="onChange"
                                    placeholder="请选择" @click="goAreaPage"
                                    :rules="[{ required: true, message: '请选择所在地区' }]">
                                </van-field>
                            </vant-col>
                        </vant-row>
                        <vant-row>
                            </vant-col>
                            <vant-col>
                                <van-field maxlength="40" v-model="addrForm.address" label="详细地址" placeholder="请输入详细地址"
                                    :rules="[{ required: true, message: '请输入详细地址' }]" />
                            </vant-col>
                        </vant-row>
                        <vant-row class="default-addr">
                            </vant-col>
                            <vant-col>
                                <div class="van-field__label">设为默认地址</div>
                            </vant-col>
                            <vant-col>
                                <van-switch size="18px" v-model="defaultAddr" />
                            </vant-col>
                        </vant-row>
                        <!-- <div>
                            <van-button class="submit-addr" round block type="info" native-type="submit">保存</van-button>
                        </div> -->

                        <!-- <div class="add-address-btn-container">
                            <div class="add-address-btn" @click="submitAddr">保存</div>
                        </div> -->

                        <div class="add-address-btn-container">
                            <div class="add-address-btn-edit" v-show='!isAdd' @click="deleteAddr">删除</div>
                            <div :class="isAdd? ' add-address-btn-edit':' add-address-btn' " @click="submitAddr">保存
                            </div>
                        </div>
                    </template>
                </van-form>
            </div>
        </div>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js "></script>
    <script src="../../script/restful.js "></script>
    <script src="../../script/businessCommon.js "></script>
    <script>
        apiready = function () {
            let vm = new Vue({
                el: ".app",
                data() {
                    return {
                        addrForm: {
                            address: "",
                            // areaId: "",
                            areaName: "",
                            id: 0,
                            isDefault: false,
                            lat: 0,
                            lng: 0,
                            name: "",
                            phone: "",
                            provinceName: "",
                            cityName: "",
                        },
                        addressStr: "",
                        title: "",
                        defaultAddr: false,
                        isAdd: false,//是否是新增页
                    }
                },
                created() {

                },
                mounted() {
                    this.title = api.pageParam.status === "add" ? "添加新地址" : "编辑地址"
                    this.isAdd = api.pageParam.status === "add"
                    this.addrForm.id = (api.pageParam.addr && api.pageParam.addr.id) || api.pageParam.id
                    if (this.title === "编辑地址") {
                        this.addrForm = api.pageParam.addr || {};
                        this.defaultAddr = this.addrForm.isDefault

                        if (this.addrForm.provinceName == ("上海市" || "天津市" || "重庆市" || "北京市")) {
                            this.addressStr = this.addrForm.cityName + this.addrForm.areaName
                        } else {
                            this.addressStr = this.addrForm.provinceName + this.addrForm.cityName + this.addrForm.areaName
                        }
                    }
                },
                methods: {
                    //删除
                    deleteAddr() {
                        var vm = this;
                        api.confirm({
                            msg: '是否删除',
                            buttons: ['确定', '取消']
                        }, function (ret, err) {
                            if (ret.buttonIndex == 1) {
                                mime("deleteAddress")({
                                    id: vm.addrForm.id
                                }, function (ret) {
                                    toastMiddle("删除地址成功")
                                    api.sendEvent({
                                        name: 'refleshAddress',
                                        extra: {
                                            isReflesh: true
                                        }
                                    })
                                    setTimeout(() => {
                                        vm.backPage();
                                    }, 500);
                                })
                            }
                        });
                    },
                    submitAddr() {
                        var vm = this;
                        vm.addrForm.isDefault = vm.defaultAddr

                        if (this.title === "添加新地址") {
                            console.log(vm.defaultAddr)

                            console.log(JSON.stringify(this.addrForm))
                            mime("addAddress")(this.addrForm, function (ret) {
                                toastMiddle("添加地址成功")
                                api.sendEvent({
                                    name: 'refleshAddress',
                                    extra: {
                                        isReflesh: true
                                    }
                                })
                                setTimeout(() => {
                                    vm.backPage();

                                }, 500);
                            })
                        } else {

                            mime("editAddress")(this.addrForm, function (ret) {

                                toastMiddle("编辑地址成功")
                                api.sendEvent({
                                    name: 'refleshAddress',
                                    extra: {
                                        isReflesh: true
                                    }
                                })
                                setTimeout(() => {
                                    vm.backPage();
                                }, 500);
                            })
                        }
                    },
                    backPage() {
                        api.closeWin();
                    },
                    forwardPage(url, relative) {
                        api.openWin({
                            name: url,
                            url: (relative || "") + url + '.html',
                            bounces: false,
                            pageParam: {
                                key: 'value'
                            }
                        });
                    },
                    // 所在地区
                    goAreaPage() {
                        api.openWin({
                            name: 'release_area_select_win',
                            url: '../circle_new/circle_select_address_win.html',
                            bounces: false,
                            pageParam: {
                                key: 'value'
                            }
                        });
                    },
                }
            })
            api.addEventListener({
                name: 'select-address'
            }, function (ret) {
                console.log(JSON.stringify(ret))
                var cityInfo = ret.value.city
                if (ret.value.city.province == ("上海市" || "天津市" || "重庆市" || "北京市")) {
                    vm.addressStr = cityInfo.city + cityInfo.district
                    // vm.$set(vm.addrForm, 'addressStr', ret.value.city.city + ret.value.city.district)
                } else {
                    vm.addressStr = cityInfo.province + cityInfo.city + cityInfo.district
                }

                vm.addrForm.address = cityInfo.address
                vm.addrForm.lat = cityInfo.lat
                vm.addrForm.lng = cityInfo.lon
                vm.addrForm.provinceName = cityInfo.province
                vm.addrForm.cityName = cityInfo.city
                vm.addrForm.areaName = cityInfo.district
                console.log(JSON.stringify(vm.addrForm))
                // {"value":{"city":{"uid":"B0FFLJNIDS","name":"街电(惠生堂大药房南翔东方伟业广场店)","type":"B0FFLJNIDS","address":"银翔路609号1层115室","tel":"",
                // "distance":69,"indoorData":"floor:0-- floorName:--- poiId:","lat":31.290426,"lon":121.323425,"province":"上海市","city":"上海市","district":"嘉定区"}}}

            })
        }
    </script>
</body>

</html>